<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/artist-workroom.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="stageName"></h1>
			<a class="mui-pull-right" id="uAttention"><i class="iconfont mui-icon">&#xe65c;</i><span>关注</span></a>
		</header>
		<!--body-->
		<div class="mui-content">
			<!--艺人概览-->
			<div id="details_top">
				<!--艺人头像-->
				<!--艺人姓名，标识，地址，工资-->
				<div id="details_top_info">
					<span id="artist_photo"><img id="userPic" /></span>
					<div id="details_top_right" class="mui-pull-right">
						<p class="icons">
							<i class="iconfont sex1">&#xe634;</i>
							<i class="iconfont sex2">&#xe604;</i>
							<i class="iconfont honesty honesty-lv1">&#xe713;</i>
							<i class="iconfont auth">&#xe605;</i>
						</p>
						<p id="minSalary"></p>
						<p id="address"></p>
					</div>
				</div>
				<!--粉丝，已成交，好评率-->
				<div id="details_top_foot">
					<div class="details_top_foot_block">
						<span style="color: #9C9C9C;">被关注数</span>
						<span id="fanNum"></span>
					</div>
					<div class="details_top_foot_block">
						<span style="color: #9C9C9C;">已成交(笔)</span>
						<span id="completeNum"></span>
					</div>
					<div class="details_top_foot_block">
						<span style="color: #9C9C9C;">好评率</span>
						<span id="rateOfpraise"></span>
					</div>
				</div>
			</div>
			<!--艺人祥览-->
			<!--三个标签页导航-->
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-negative">
					<a class="mui-control-item mui-active" href="#item1mobile">
						个人简介
					</a>
					<!--<a class="mui-control-item" href="#item2mobile">
						小样&amp;作品 / <span id="perf-count"></span>
					</a>-->
					<a class="mui-control-item" href="#item3mobile">
						服务&amp;评价
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--艺人详细信息表格-->
								<table class="details_table" cellspacing="10">
									<tr>
										<th>帮办数</th>
										<th>出生日期</th>
										<th>星座</th>
										<th>血型</th>
									</tr>
									<tr>
										<td id="singularNum"></td>
										<td id="birthday"></td>
										<td id="constellation"></td>
										<td id="bloodType"></td>
									</tr>
									<tr>
										<th>年龄</th>
										<th>身高(cm)</th>
										<th>体重(kg)</th>
										<!--<th>三围(cm)</th>-->
									</tr>
									<tr>
										<td id="age"></td>
										<td id="stature"></td>
										<td id="weight"></td>
										<!--<td id="bwh"></td>-->
									</tr>
									<tr>
										<th colspan="2">毕业院校</th>
										<th>学历</th>
										<th>从业年限</th>
									</tr>
									<tr>
										<td colspan="2" id="graduateSchool"></td>
										<td id="educationalBackground"></td>
										<td><span id="artisticCareer"></span></td>
									</tr>
								</table>
								<!--背景条-->
								<div id="backg_item"></div>
								<!--类型，才艺，自我介绍，获奖情况等-->
								<div id="item1mobile_strip">
									<div class="item1mobile_strip">
										<p>类型：</p>
										<span id="performanceTypeId"></span>
									</div>
									<div class="item1mobile_strip">
										<p>主要帮办：</p>
										<span id="specialty"></span>
									</div>
									<div class="item1mobile_strip">
										<p>自我介绍：</p>
										<span id="selfIntroduction"></span>
									</div>
									<div class="item1mobile_strip">
										<p>已有证书：</p>
										<span id="biographyList"></span>
									</div>
									<div class="item1mobile_strip">
										<p>最佳帮办经历：</p>
										<span id="biographyHighest"></span>
									</div>
									<div class="item1mobile_strip">
										<p>帮办经历：</p>
										<span id="performanceList"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="artistOpusList">
									<!--<li class="mui-table-view-cell mui-media">
										<a href="javascript:;">
											<div class="opusImg mui-media-object mui-pull-left">
												<img src="../images/shuijiao.jpg" />
												<div class="opusInfoBar">
													<span class="playNum"><i class="iconfont">&#xe690;</i> : 40</span>
													<span class="praiseNum"><i class="iconfont">&#xe6b5;</i> : 77</span>
												</div>
												<span class="type">作品</span>
											</div>
											<div class="mui-media-body">
												<p class="opustitle"><span class="mui-ellipsis">我我从哪里我我从哪里来从哪里来我从哪里来</span></p>
												<p class="mui-ellipsis-2">一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌一首好听的歌</p>
												<p class="opusTag"><span>民歌 | 慢歌</span><span class="releaseTime mui-pull-right">12-06</span></p>
											</div>
										</a>
									</li>-->
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--星星-->
								<div id="item3mobile_top">
									<h5 class="min-title">星级评价</h5>
									<div id="evaluateList">
										<!--<div class="evaluateItem">
											<span>工作速度 : 5</span>
											<i class="iconfont">&#xe60f;</i>
											<i class="iconfont">&#xe60f;</i>
											<i class="iconfont">&#xe60f;</i>
											<i class="iconfont">&#xe60f;</i>
											<i class="iconfont">&#xe65c;</i>
										</div>-->
									</div>
								</div>
								<!--评价内容-->
								<h5 class="min-title">服务列表</h5>
								<div id="aPEList">
									<!--<div class="details_review">
										<p>用户未填写评价内容</p>
										<span>某某公司晚会</span><br />
										<span>mf1362****177</span>
										<span class="mui-pull-right">2016.10.31</span>
									</div>-->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--底部雇佣按钮-->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" id="connection">联系TA</a>
			<a class="mui-tab-item btn-main" id="hire">雇佣TA</a>
		</nav>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var artistId = plus.webview.currentWebview().artistId;
				var pic;
				var headLazyLoad = mui('#artist_photo').imageLazyload({
					placeholder: '../images/holder1.png'
				});
				var artistOpusList = document.getElementById("artistOpusList"); // 小样列表
				var opusLazyLoad = mui(artistOpusList).imageLazyload({
					placeholder: '../images/shuijiao.jpg'
				});
				var evaluateList = document.getElementById("evaluateList"); // 星级评价列表
				var aPEList = document.getElementById("aPEList"); // 服务列表
				var uAttention = false; // 是否关注
				var banned = false; // 是否禁止接单
				var url = baseURL + 'artist/getArtiseById/token/234/' + artistId + '.json';
				console.log(url)
				mui('.mui-scroll-wrapper').scroll();
				Common.ajax({
						url : url
					}, function(data) {
					console.log(JSON.stringify(data));
					$.each(data, function(i, o) {
						if(!/^(birthday|artistAnnouncementList|artistEvaluateList|artistOpusList|banned|pic|id|minSalary|rateOfpraise|honestyLevel|isAuth|aPEList|uAttention|sex)$/.test(i)) {
							$("#" + i).text(o);
						} else {
							switch(i) {
								case 'birthday': // 计算年龄
									$("#birthday").text(o);
									var year = Number(o.substring(0, o.indexOf('-')));
									var age = new Date().getFullYear() - year;
									$("#age").text(age);
									break;
								case 'artistAnnouncementList': // 通告列表
									break;
								case 'artistEvaluateList': // 星级评价
									if(o.length) {
										for(var x = 0; x < o.length; x++) {
											createInvitation(o[x].evaluateId, Number(o[x].value));
										}
									} else {
										Common.showState(evaluateList, '', '暂无评价', 5);
									}
									break;
//								case 'artistOpusList': // 小样作品列表
//									$("#perf-count").text(o.length);
//									if(o.length) {
//										for(var x = 0; x < o.length; x++) {
//											createOpusList(o[x].oid, o[x].name, o[x].fileName, o[x].description,
//												o[x].kind, o[x].label, o[x].playNum, o[x].praiseNum, o[x].type.toString(), o[x].releaseTime);
//										}
//										opusLazyLoad.refresh(true);
//									} else {
//										Common.showState(artistOpusList, '&#xe608;', 'TA还没作品哦', 20);
//									}
//									break;
								case 'banned': // 是否禁止接单
									banned = o;
									break;
								case 'pic': // 艺人头像
									pic = o;
									var headPic = Common.artistPic + artistId + o + '?' + Math.random();
									$("#userPic").attr('data-lazyload', headPic);
									headLazyLoad.refresh(true);
									break;
								case 'minSalary':
									$("#minSalary").text(o ? '￥' + o : '面议');
									break;
								case 'rateOfpraise': // 好评率
									$("#rateOfpraise").text((o * 100).toFixed(0) + ' %');
									break;
								case 'honestyLevel': // 诚信等级
									$("i.honesty").addClass('honesty-lv' + o);
									break;
								case 'isAuth': // 是否实名认证
									$("i.auth").addClass('state' + o);
									break;
								case 'aPEList': // 服务评价列表
									if(o.length) {
										for(var x = 0; x < o.length; x++) {
											createaPEList(o[x].userName, o[x].title, o[x].description, o[x].releaseTime.substr(0, 16));
										}
									} else {
										Common.showState(aPEList, '', 'TA还没有参加过任何帮办', 5)
									}
									break;
								case 'uAttention': // 是否关注
									uAttention = o && o.state;
									$("#uAttention i").html(uAttention ? '&#xe60f;' : '&#xe65c;');
									$("#uAttention span").text(uAttention ? '已关注' : '关注');
									break;
								case 'sex':
									if(o == 1) {
										$("#details_top_info .sex1").show();
									} else {
										$("#details_top_info .sex2").show();
									}
									break;
								default:
									break;
							}
						}
					});
					plus.nativeUI.closeWaiting();
				}, function(xhr) {
					plus.nativeUI.closeWaiting();
					Common.linkError();
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				

				/**
				 * 服务评价列表
				 * @param {Object} evaluateId	评价内容
				 * @param {Object} value		分数
				 */
				function createInvitation(evaluateId, value) {
					var item = document.createElement('div');
					item.className = 'evaluateItem';
					var str = '<span>' + evaluateId + " : " + value + '</span>';
					for(var i = 1; i <= 5; i++) {
						str += '<i class="iconfont">&#xe6' + (i <= value ? '0f' : '5c') + ';</i>';
					}
					item.innerHTML = str;
					evaluateList.appendChild(item);
				}

				/**
				 * 小样列表
				 * @param {Object} id			作品id
				 * @param {Object} name			作品名称
				 * @param {Object} src			预览图片路径
				 * @param {Object} description	描述
				 * @param {Object} kind			类别
				 * @param {Object} label		标签
				 * @param {Object} playNum		播放次数
				 * @param {Object} praiseNum	好评数量
				 * @param {Object} type			类型（小样 | 作品）
				 * @param {Object} releaseTime	发布时间
				 */
//				function createOpusList(id, name, src, description, kind, label, playNum, praiseNum, type, releaseTime) {
//					var item = document.createElement('li');
//					item.className = 'mui-table-view-cell mui-media';
//					item.id = id;
//					var str = '<a href="javascript:;"><div class="opusImg mui-media-object mui-pull-left">';
//					str += '<img data-lazyload="' + src + '" /><div class="opusInfoBar"><span class="playNum">';
//					str += '<i class="iconfont">&#xe690;</i> : ' + playNum + '</span><span class="praiseNum">';
//					str += '<i class="iconfont">&#xe6b5;</i> : ' + praiseNum + '</span></div><span class="type">';
//					str += (type.charAt(0) == 1 ? '小样' : '作品') + '</span></div><div class="mui-media-body"><p class="opustitle">';
//					str += '<span class="mui-ellipsis">' + name + '</span>';
//					str += '</p><p class="mui-ellipsis-2">' + description + '</p><p class="opusTag"><span>';
//					str += label + ' | ' + kind + '</span><span class="releaseTime mui-pull-right">' + releaseTime + '</span></p></div></a>';
//					item.innerHTML = str;
//					artistOpusList.appendChild(item);
//				}

				/**
				 * 综合评分
				 * @param {Object} name			评价人姓名
				 * @param {Object} title		演艺标题
				 * @param {Object} description	评价内容
				 * @param {Object} releaseTime	评价时间
				 */
				function createaPEList(name, title, description, releaseTime) {
					var item = document.createElement('div');
					item.className = 'details_review';
					var str = '<p>' + (description ? description : '用户未填写评价内容') + '</p><span>';
					str += title + '</span><br /><span>' + name + '</span><span class="mui-pull-right">';
					str += releaseTime + '</span>';
					item.innerHTML = str;
					aPEList.appendChild(item);
				}

				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				mui('.mui-input-group').on('change', 'input', function() {
					if(this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});

				// 动态高度
				var aheight = $(window).height() - 140 - $("#details_top").outerHeight();
				$(".mui-slider-group, .mui-scroll-wrapper").css('min-height', aheight + 'px');

				// 关注
				mui('.mui-bar').on('tap', '#uAttention', function() {
					if(User.islogin()) {
						if(User.getMyID() != artistId) {
							var url = baseURL + 'myArtist/attention/26/' + artistId + '/' + (uAttention ? 0 : 1) + '.json'
							console.log(url);
							Common.ajax({
									url : url
								}, function(data) {
								console.log(JSON.stringify(data));
								if(data.code == 1) {
									uAttention = !uAttention;
									mui.toast('操作成功');
									$("#uAttention i").html(uAttention ? '&#xe60f;' : '&#xe65c;');
									$("#uAttention span").text(uAttention ? '已关注' : '关注');
								} else if(data.code == -2){
									console.log(JSON.stringify(data));
									mui.toast('你不能关注自己');
								} else {
									mui.toast('操作失败，请稍后再试');
								}
							}, function(xhr) {
								mui.toast('网络异常，请稍后再试');
								console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
							})
						} else {
							mui.toast('你不能关注自己');
						}
					} else {
						mui.toast('请先登录');
					}
				})

				// 联系TA
				mui('nav').on('tap', '#connection', function() {
					if(User.islogin()) {
						if(User.getMyID() != artistId) {
							Common.openWindow('single-chat.html', {
								releaseId: artistId,
								pic: pic,
								sName: $("#stageName").text()
							});
						} else {
							mui.toast('你不能联系自己');
						}
					} else {
						mui.toast('请先登录');
					}
				})

				// 雇佣TA
				mui('nav').on('tap', '#hire', function() {
					if(User.islogin()) {
						if(User.getMyID() != artistId) {
							if(!banned) {
								Common.openWindow('hireable-artshow.html', {
									artistId : artistId
								});
							} else {
								mui.toast('该帮办者是不可接单状态');
							}
						} else {
							mui.toast('你不能雇佣自己');
						}
						
					} else {
						mui.toast('请先登录');
					}
				})

				// 作品页
				mui('#item2mobile').on('tap', '.mui-table-view-cell', function() {
					plus.nativeUI.showWaiting();
					Common.openWindow('artist-production.html', {
						perfId : this.id,
						pic : pic,
						artistName : $("#stageName").text(),
						artistId : artistId
					});
				})
			})
		</script>
	</body>

</html>